﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="CreateUser.aspx.cs" Inherits="CreateUser" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
 <link href="js/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
    <style>
    section#bg_content{ padding:0}
    .bg01{ border:0 none;}
    </style>
    <script  type="text/javascript">
        $(document).ready(function () {
            jQuery(".form").validationEngine({ scroll: false, focusFirstField: false });
            $("#dgCreateUser").dialog({
                resizable: false,
                width: 270,
                modal: true,
                autoOpen: false,
                buttons: [{
                    text: "Ok",
                    click: function () {
                        $(this).dialog("close");
                    }
                }]
            });
        });

        function customValidate(field, rules, i, options) {
            var pattern = new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
            var match = pattern.exec(field.val());
            if (field.val() == "") {
                return true;
            }
            else if (match == null) {
                return options.allrules.email.alertText;
            }
        }
    </script>
    <script>

        function CreateNewAccount() {
            $('#createnewaccount').click(function () {
                if (!$(".form").validationEngine('validate')) {
                    return false;
                }
                $.ajax({
                    type: "POST",
                    url: "PIMService.asmx/CreateNewMember",
                    data: "{'_userName':'" + $("#create_username").val() + "','_password':'" + $("#create_password").val() + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        if (result.d == 'NotOK' || result.d == '') {
                            alert('Create a new user is fail!');
                        }
                        else if (result.d == '10') {
                            //alert('This username is already in system!');
                            $("#dgCreateUser").dialog('open');
                        }
                        else {
                            self.location = "Default.aspx"
                        }
                    },
                    error: function (result) {
                        alert('Can not create a new user!');
                    }
                });
                //                }
            });
        }

        $(document).ready(function () {
            CreateNewAccount();
        });
    </script>
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<section id="bg_content">
<div class="alpha01 clearfix" >
            <div class="bg01">
                <div class="bg02" >
                    <%--<div class="bg03 clearfix">--%>
                    <div class="bg03 clearfix" style="padding:10px;" >
                        <form method="post" action="#">
                        <div style="">
                        <div class="accountdiv">
                            <p class="title01">SignUp</p>
                        </div>
                        <div style="clear:both"></div>
                        <div class="accountdiv">
                            <div class="text-field">
                            Email Address:
                            </div>
                            <div class="ip-text">
                            <input class="validate[required,funcCall[customValidate]] input-trpr"  name="email" id="create_username" type="text" autocomplete="on" placeholder="Email address">
                            </div>
                        </div>
                        <div style="clear:both"></div>
                        <div class="accountdiv">
                            <div class="text-field">
                            Password:
                            </div >
                            <div class="ip-text">
                                <input class="validate[required,minSize[5],maxSize[50]] input-trpr"  name="password" id="create_password" type="password" placeholder="Password">
                            </div>
                        </div>
                        <div style="clear:both"></div>
                        <div class="accountdiv">
                            <div class="text-field">
                            Confirm password:
                            </div>
                            <div class="ip-text">
                            <input class="validate[required,equals[create_password]] input-trpr" name="confirmpassword" id="confirm_create_password" type="password" placeholder="Password">
                            </div>
                        </div>
                        <div style="clear:both"></div>
                        <div style="line-height:40px;" >
                            <input class="validate[required]" id="checkTerms"  type="checkbox" name="Terms"/>
                            I agree to the PlanItMeal <a style="color:#427FED;" href="Terms.aspx">Term of Service and Private Policy</a>
                        </div>
                        <div class="accountdiv" style="text-align:center; margin-top:20px;" >
                            <input class="button-form"  id="createnewaccount"  value="Create account" type="button">
                        </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
</section>

    <div id="dgCreateUser" class="message-diaglog">
        <p>
            This username is already in system.</p>
    </div>
</asp:Content>

